<template>
	<view class="commodityManagement">
		<view class="topSearch">
			<view class="left">
				<image src="/static/img/index/61.png" mode="widthFix"></image>
				<input @confirm="requstList" v-model="data.obj.productName" type="text" placeholder="请输入搜索关键词" />
			</view>
		</view>
		<view class="content">
			<view class="left">
				<view :class="data.obj.categoryId == item.id?'active':''"
					@click="data.obj.categoryId = item.id,requstList()" class="leftLisItem"
					v-for="(item,index) in data.leftList" :key="index">
					{{item.categoryName}}
				</view>

			</view>
			<scroll-view scroll-y="true">
				<view class="contentRight">
					<view @tap="handeClick(item)" class="rightListItem" v-for="(item,index) in data.result.list"
						:key="index">
						<view class="left_1">
							<view class="left">
								<text>免单购</text>
								<view class="img">
									<image v-if="item.mainPictures[0]"
										:src="data.httpUrl+'/app/file/viewFile?fileId='+item.mainPictures[0]"
										mode="aspectFill"></image>
								</view>
							</view>
							<view class="right">
								<text>{{item.productName}}</text>
								<view class="">
									<text>￥{{item.hasPreferential.value=='Y'?item.preferentialPrice:item.price}}</text>
									<text v-if="item.hasPreferential.value=='Y'"
										:style="item.hasPreferential.value == 'Y'?'text-decoration:line-through;':''">¥{{item.price}}</text>
								</view>
								<!-- 库存：{{item.stockBalance}} -->
								<view class="">
									月售：{{item.sellCount}}
								</view>
							</view>
						</view>
						<view class="right_1">
							<image :src="item.joinFreeFlag?'/static/img/index/49.png':'/static/img/index/196.png'"
								mode="widthFix"></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	<!-- 	<view class="bot">
			<view class="left">
				<image :src="data.bool?'/static/img/index/49.png':'/static/img/index/196.png'"
					mode="widthFix"></image>
				全选
			</view>
			<view class="right">
				已选择(4)
			</view>
		</view> -->
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import { listCategory, pageProduct, upOrDownGoods, productDeleteSpu } from '@/utils/api/goods'
	import {insertFreeSpu,deleteFreeSpu} from '@/utils/api/freeShipping'
	const data = reactive<any>({
		leftList: [],
		obj: { pageNum: 1, pageSize: 10 },
		httpUrl: getApp().globalData.baseUrl,
		result: { total: 0, list: [] },
		info: {},
		bool:false
	})
	const navTo = (url : string) => {
		uni.navigateTo({
			url
		})
	}

	listCategory().then((res) => {
		data.leftList = res.data;
		if (res.data.length) {
			data.obj.categoryId = res.data[0].id
		}
		requstList()
	})


	const handeClick = (item)=>{
		uni.showLoading({
			title:'加载中.....',
			mask:true
		})
		const b = item.joinFreeFlag?deleteFreeSpu:insertFreeSpu;
		b({data:{spuIds:[item.spuId]}}).then((res)=>{
			if(res.code == 200){
				uni.showToast({
					title:item.joinFreeFlag?'取消成功!':'报名成功!',
					icon:'none'
				})
				item.joinFreeFlag = item.joinFreeFlag?0:1;
			}
		})
		console.log(item)
	}

	const requstList = () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		if (data.obj.pageNum == 1) {
			data.result.list = [];
		}
		pageProduct({ data: data.obj }).then((res) => {
			res.data.list = [...data.result.list, ...res.data.list];
			data.result = res.data;
			uni.hideLoading()
		})
	}
</script>

<style lang="scss" scoped>
	.commodityManagement {
		height: 100vh;
		background: #F4F6FA;
		display: flex;
		flex-direction: column;
		>.bot{
			padding: 16rpx 16rpx 30rpx 16rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				image{
					width: 36rpx;
					margin-right: 10rpx;
				}
			}
			.right{
				padding: 16rpx 51rpx;
				border-radius: 50rpx;
				background-color: #FF263F;
				font-size: 32rpx;
				color: #fff;
			}
		}
	}

	.topSearch {
		display: flex;
		background: #fff;
		padding: 30rpx 28rpx 16rpx 28rpx;
		border-bottom: 2rpx solid #E5E5E5;

		.left {
			flex: 1;
			margin-right: 20rpx;
			display: flex;
			background: #F4F6FA;
			align-items: center;
			padding: 0 28rpx;

			image {
				width: 36rpx;
			}

			input {
				margin-left: 10rpx;
				height: 72rpx;
			}
		}

		.right {
			width: 146rpx;
			height: 72rpx;
			border-radius: 12rpx;
			background: #6B64D3;
			display: flex;
			align-items: center;
			color: #FFFFFF;
			justify-content: center;

			.u-icon {
				margin-right: 10rpx;
			}
		}
	}

	.content {
		flex: 1;
		height: 0;
		display: flex;

		>.left {
			background: #fff;
			width: 236rpx;

			>view {
				display: flex;
				align-items: center;
				height: 106rpx;
				font-size: 28rpx;
				color: #262626;
				padding-left: 24rpx;
				border-left: 2rpx solid transparent;

				image {
					width: 30rpx;
					margin-left: 8rpx;
				}
			}

			.active {
				color: #6B64D3;
				border-color: #6B64D3;
				background: #F4F6FA;
			}
		}

		scroll-view {
			padding-top: 24rpx;
		}

		.contentRight {
			flex: 1;
			margin: 0 12rpx;

			>view {
				margin-top: 16rpx;
			}

			>view:nth-of-type(1) {
				margin-top: 0;
			}

			.rightListItem {
				padding: 20rpx;
				border-radius: 16rpx;
				background: #fff;
				display: flex;
				align-items: center;

				.left_1 {
					flex: 1;
					width: 0;
					display: flex;
					margin-right: 20rpx;

					.left {
						width: 118rpx;
						height: 118rpx;
						border-radius: 16rpx;
						position: relative;

						image {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}

						.img {
							width: 100%;
							height: 100%;
						}

						text {
							display: inline-block;
							width: 72rpx;
							line-height: 36rpx;
							text-align: center;
							border-radius: 20rpx 0 20rpx 0;
							background: linear-gradient(324deg, #FFBE88 0%, #FF743A 100%), linear-gradient(24deg, rgba(255, 130, 150, 0) 0%, #FF6A82 100%);
							color: #FFF6E4;
							font-family: 'MyFont1';
							font-size: 20rpx;
							position: absolute;
							left: 0;
							top: 0;
							z-index: 9;
						}
					}

					.right {
						display: flex;
						flex-direction: column;
						flex: 1;
						margin-left: 16rpx;

						>text {
							color: #000000;
							font-size: 32rpx;
							font-weight: bold;
						}

						>view:nth-of-type(1) {
							text:nth-of-type(1) {
								margin: 10rpx 0;
								color: #FF5233;
							}

							text:nth-of-type(2) {
								margin-left: 5rpx;
								display: inline-block;
								color: #8C8C8C;
								font-size: 24rpx;
							}
						}

						>view:nth-of-type(2) {
							color: #8C8C8C;
							font-size: 24rpx;
						}
					}
				}

				.right_1 {
					image {
						width: 36rpx;
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					margin-top: 24rpx;

					text {
						width: 80rpx;
						line-height: 58rpx;
						text-align: center;
						border-radius: 8rpx;
						font-size: 24rpx;
						color: #333333;
						border: 1rpx solid #E5E5E5;
					}

					text:nth-of-type(4) {
						border-color: #E4E2FC;
						background: #E4E2FC;
						color: #6B64D3;
					}

					text:nth-of-type(5) {
						border-color: #fe6161;
						background: #fe6161;
						color: #fff;
					}
				}
			}
		}
	}

	.text-up {
		border-color: #e1f3d8;
		background: #e1f3d8;
		color: #09bb07;
	}

	.text-down {
		border-color: #f2f6fc;
		background: #f2f6fc;
		color: #909399;
	}

	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}
</style>